<template>
  <div class="designer-list">
    <div class="top">设计师审批</div>
    <div class="bottom">
      <Input placeholder="请输入用户名称/手机号" @search="handleSearch" />
      <div class="table-box mt">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="待审批" name="first" />
          <el-tab-pane label="已同意" name="second" />
          <el-tab-pane label="已拒绝" name="third" />
        </el-tabs>
        <el-table :data="tableData" style="width: 100%" :height="height">
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="phone" label="联系方式" />
          <el-table-column prop="company_name" label="所属公司" />
          <el-table-column prop="created_at" label="申请时间" />
          <el-table-column v-if="activeName !== 'second'" prop="address" label="操作">
            <template slot-scope="scope">
              <div>
                <div v-if="activeName === 'first'">
                  <span class="col-blue" @click="agreeDesigner(scope.row)">同意</span>
                  <span class="col-red" @click="refuseDesigner(scope.row)">拒绝</span>
                </div>
                <div v-if="activeName === 'third'">
                  <span class="col-blue" @click="refuseClick(scope.row)">拒绝理由</span>
                  <span class="col-red" @click="delApply(scope.row)">删除</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="size"
            layout="total,prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="填写拒绝理由" :visible.sync="dialogVisible" width="500px">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="拒绝理由:">
          <el-input :disabled="refused" v-model="form.mark" size="medium" type="textarea" style="width: 300px" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-show="!refused">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
    <Pagination class="pagination" />
  </div>
</template>
<script>
import Input from "@/common/input";
import Pagination from "@/common/pagination";
import Resize from "@/common/mixins/resize";
import {
  getDesignerApply,
  agreeDesigner,
  refuseDesigner,
  delDesigner
} from "@/api/http/designer";
export default {
  components: {
    Input,
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      refused:false,
      page: 1,
      size: 10,
      total: 0,
      editId:"",
      dialogVisible: false,
      form: {
        mark: ""
      },
      defaultHeight: 320,
      status: 0,
      activeName: "first",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          circleUrl:
            "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        }
      ],
      query: ""
    };
  },
  created() {
    this.getDesignerApply();
  },
  methods: {
    // 删除已拒绝
    delApply(row){
      delDesigner({
        id:row.id
      }).then(res=>{
        // console.log(res,'---res')
        if(res.code == 200){
          this.$message.success('删除成功');
          this.getDesignerApply();
        }
      });
    },
    // 同意申请为设计师
    agreeDesigner(row) {
      console.log(row, "---row--");
      agreeDesigner({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.$message.success("通过成功");
          this.getDesignerApply();
        }
      });
    },
    // 拒绝成为设计师
    refuseDesigner(row) {
      this.refused = false;
      this.dialogVisible = true;
      this.editId = row.id;
      console.log(this.activeName,'--00');
      console.log(row, "---row");
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.page = val;
      this.getDesignerApply();
    },
    // 获取设计师申请列表数据
    getDesignerApply() {
      getDesignerApply({
        page: this.page,
        keywords: this.query,
        status: this.status
      }).then(res => {
        // console.log(res, "---r-es");
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    handleSearch(query) {
      this.query = query;
      this.getDesignerApply();
    },
    handleClick(tab) {
      // console.log(this.activeName);
      this.page = 1;
      this.status =
        this.activeName == "first" ? 0 : this.activeName == "second" ? 1 : 2;
      this.getDesignerApply();
    },
    handleClose() {
      if(!this.form.mark){
        this.$message("请填写拒绝理由");
        return;
      }
      refuseDesigner({
        id:this.editId,
        reason:this.form.mark
      }).then(res=>{
        console.log(res,'----res');
        if(res.code == 200){
          this.$message.success("拒绝成功");
          this.dialogVisible = false;
          this.form.mark = "";
          this.getDesignerApply();
        }
      });
    },
    refuseClick(row) {
      this.form.mark = row.reason;
      this.refused = true;
      this.dialogVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/color.scss";
@import "@/styles/el-pagination.scss";
@import "@/styles/el-button.scss";
.top {
  line-height: 44px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-family: Roboto;
  font-weight: bold;
}
.mt {
  margin-top: 20px;
}
.block {
  margin: 40px;
  text-align: center;
}
</style>
